<template>
    <div class="base_ul_box ">
        <img :src="props.img" alt="图片丢失" title="msg" v-show="props.img">
        <slot name="title" class="base_ul_title"></slot>
        <ul class="base_ul select outer_shadows" >
            <li v-for="(item,index) in props.list" @click="sub" :key="index">
                <router-link :to='"/"+item.url'>{{ item.msg }}</router-link>
            </li>
        </ul>
        <img src="/public/img/header/arrows.svg" alt="" class="arrows_img">
    </div>
</template>
<!--下拉列表组件-->
<script setup>

const emit = defineEmits(['indexSub'])

//下拉列表数据
const props = defineProps({
    list:Array,
    img:String,
    index:Number
})

const sub=()=>{
  emit('indexSub',props.index);
}

</script>

<style scoped>
img{
    width: 15px;
    object-fit: cover;
}
.base_ul_box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.base_ul {
    display: none;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(40, 40, 40, 0.4);
    animation: selected .3s ease-in 0s 1 forwards;
}

.base_ul_box:hover .base_ul {
    display: block;

}

.base_ul_title {
    display: inline-block;
    width: 100%;
}

li {
    list-style: none;
    width: 100%;
    margin: 0;
    height: 30px;
}

.base_ul li a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .1s;
}

.base_ul li a:hover {
    color: #6da6e1;
}

.arrows_img {
    transition: all .3s;
    margin: 0 3px;
    transform: rotate(0);
}


@keyframes selected {
    0%{
        transform: translateY(100%) rotateX(90deg);
    }
    100%{
        transform: translateY(100%) rotateX(0);
    }
}
</style>